<template>
  <!-- 背景组件 -->
  <code-rain class="code-rain-background"></code-rain>
  <!-- 菜单内容 -->
  <menu-layout class="menu-layout"></menu-layout>
  <div class="header_content">
    <div class="header">
      <el-carousel height="100%" style="width: 100%;" motion-blur>
        <el-carousel-item v-for="item in images" :key="item">
          <img :src="item" alt="轮播图片" class="carousel-img" />
        </el-carousel-item>
      </el-carousel>
    </div>

  </div>
  <div class="content">
    <transition name="slide">
      <component :is="currentPage" />
    </transition>
  </div>
<button @click="ToReseasePage">发布帖子</button>
</template>
<script setup>
import MenuLayout from '@/components/MenuLayout.vue'
import codeRain from '@/components/codeRain.vue'
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'
import Lates_post from '@/components/lates_post.vue'
const router = useRouter()
const images = ref([
  '/images/img_1.png' // 示例图片 1
])
//菜单栏数据
const activeIndex = ref(0)
//当前菜单栏的索引
const sliderOffset = computed(() => `${activeIndex.value * 115}%`)
// 动态组件映射
const pages = [Lates_post]
const currentPage = computed(() => pages[activeIndex.value])
//跳转到发布界面
const ToReseasePage = () => {
  router.push('/release_page')
}
</script>
<style scoped>
/* 背景组件样式 */
.code-rain-background {
  position: fixed; /* 固定定位 */
  top: 0;
  left: 0;
  width: 100%; /* 覆盖整个页面宽度 */
  height: 100%; /* 覆盖整个页面高度 */
  z-index: -1; /* 确保在其他内容下方 */
}

/* 菜单组件样式 */
.menu-layout {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  color: #fff;
  margin: 0;
}

.header_content {
  width: 70vw;
  height: 50vh;
  display: flex;
  position: relative;
  background-color: white;
  left: 14.6%;
}

.Recommend_person {
  width: 100%;
  height: 33%;
  background-color: white;
  display: flex;
  position: relative;
  top: 65%;
  margin: 5px;
}

.recommend_content {
  width: 100%;
  height: 95%;
  background-color: blue;
  display: flex;
  position: relative;
  top: 5%;
  margin: 5px;
  overflow-x: auto;
}

.recommend_content_span {
  width: 20px;
  height: 100%;
  margin: 10px;
  position: relative;
  top: 20px;
}

/*推荐列表的样式*/
.post_recommend {
  width: 25%;
  height: 93%;
  background-color: bisque;
  box-sizing: border-box;
  margin: 5px;
  flex-shrink: 0;
}

/*菜单栏的样式*/
.menu_list {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: space-between;
  height: 40px;
  gap: 10px;
  padding: 0;
  overflow: hidden;
}

.menu_list ul {
  list-style: none;
  display: flex;
  padding: 0;
  width: 100%;
  margin: 0;
}

.menu_list li {
  flex: 1;
  text-align: center;
}

.menu_list li:hover {
  color: #007bff;
}

.menu_list ul::after {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 0;
  width: 30%;
  height: 3px;
  background-color: #007bff;
  transition: transform 0.3s ease;
  z-index: 2;
  transform: translateX(v-bind(sliderOffset));
}

.content {
  width: 70vw;
  height: 60%;
  position: absolute;
  display: flex;
  flex-direction: column;
  left: 15%;
  top: 52%;
  overflow: hidden;
  background-color: white;
}


.header {
  width: 60vw;
  height: 40%;
  position: absolute;
  display: flex;
  top: 20%;
  left: 7%;
  background-color: white;
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.carousel-img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}



</style>
